<template>
  <a-modal
      title="挂失租借卡"
      :width="400"
      :visible="visible"
      :loading="loading"
      @cancel="handleCancel"
      @ok="handleSubmit"
      :centered="true"
  >
    <a-spin :spinning="loading">
      <span v-if="user.rideId === null || user.rideId === undefined">
        确定要挂失卡号为 {{ card.cardNumber }} 的租借卡吗，挂失的租借卡将无法继续使用
      </span>
      <span v-else>
        您目前正在骑行状态，无法挂失。请先归还车辆
      </span>
    </a-spin>
  </a-modal>
</template>

<script>
import {removeCard} from '@/api/bike/card'
import {getInfo} from "@/api/basic/user";

export default {
  data () {
    return {
      visible: false,
      loading: false,
      card: {},
      user: {},
    }
  },
  methods: {
    lose (card) {
      this.getUserInfo()
      this.visible = true
      this.card = card
    },
    getUserInfo () {
      this.user = {}
      this.loading = true
      getInfo().then(res => {
        this.user = res.result
        this.loading = false
      }).catch(err => {
        this.$message.error(err.result || '获取用户信息失败')
        this.loading = false
      })
    },
    handleSubmit () {
      if (this.loading === true) {
        return
      }
      if (this.user.rideId !== null && this.user.rideId !== undefined) {
        this.visible = false
        return
      }
      this.loading = true
      removeCard({userId: this.card.userId, cardId: this.card.cardId})
          .then(res => {
            if (res.message === 'success') {
              this.visible = false
              this.loading = false
              this.card.cardState = 1
              this.$emit('ok', this.card)
            } else {
              this.loading = false
              this.$message.error('操作失败')
            }
          }).catch(err => {
        console.log(err)
        this.loading = false
        this.$message.error(err.result || '操作失败')
      })
    },
    handleCancel () {
      this.visible = false
    },
  }
}
</script>
